<script setup lang="ts">
  import { computed, ref, watch } from 'vue';

  // import { Card, CardMeta, Divider, Image } from '@arco-design/web-vue';
  // import { RouterLink, useRoute } from 'vue-router';
  import { queryArticleSpColumnList } from '/@/api/article';
  // import { useGlobalScroll } from '/@/hooks/useScroll';
  import { useArticleColumnStore } from '/@/store/modules/articleColumn';
  // import type { ArticleColumnRecord } from '/#/store';
  import type { ArticleSpColumnRecord } from '/@/api/model/articleModel';
  import { useRoute } from 'vue-router';
  import { useGlobalScroll } from '/@/hooks/useScroll';

  // const route = useRoute();
  const articleList = ref<ArticleSpColumnRecord[]>([]);
  // const sortActive = ref('latest');

  // 距离底部 100 px 时触发
  const { arrivedState } = useGlobalScroll({ offset: { bottom: 100 } });
  const route = useRoute();

  const getCurrentColumnId = computed(() => {
    return parseInt(route.query.column_id as string, 10) || undefined;
  });

  // 滚动页数
  const pageRef = ref(1);
  const loading = ref(false);
  // 滚动时加载文章
  const articleListLoading = ref(false);
  // 触发加载文章
  const articleListFirstLoading = ref(true);

  const articleColumnStore = useArticleColumnStore();
  articleColumnStore.fetchArticleColumns();

  // 加载文章
  const reloadAppPublishedArticlePage = async (checkIsFirstLoad = false) => {
    if (checkIsFirstLoad) {
      articleListFirstLoading.value = true;
    }
    if (articleListLoading.value) return;
    articleListLoading.value = true;

    const result = await queryArticleSpColumnList({
      sorts: '',
      column_id: getCurrentColumnId.value,
      page: pageRef.value,
      size: 20,
    });
    if (checkIsFirstLoad) {
      articleList.value = [];
    }
    articleList.value.push(...result.list);

    articleListLoading.value = false;
    articleListFirstLoading.value = false;
  };

  // 栏目变化时触发
  watch(
    getCurrentColumnId,
    () => {
      pageRef.value = 1;
      reloadAppPublishedArticlePage(true);
    },
    { immediate: true },
  );

  // 触底时加载新的文章
  watch(
    () => arrivedState.bottom,
    (isReachBottom) => {
      if (isReachBottom) {
        if (articleListLoading.value) return;
        pageRef.value++;
        reloadAppPublishedArticlePage();
      }
    },
  );
</script>
<template>
  <a-card :bordered="false" class="header-card">
    <a-image
      src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
      title="最新栏目"
      width="100%"
      height="112"
      footer-class="header-card"
    />
    <a-tabs>
      <a-tab-pane key="latest" title="最新" />
      <a-tab-pane key="hottest" title="最热" />
    </a-tabs>
    <div>
      <a-row :gutter="24">
        <template #scroll-loading v-if="loading">
          <a-spin :size="32" :loading="true" />
        </template>
        <a-col :span="12" v-for="(item, index) in articleList" :key="index">
          <a class="block" :href="'/column/deatils/' + item.id" target="_blank">
            <a-space class="py-2 mt-3 px-[12px] rounded-[5px] bg-[#F8F8FA] flex justify-between">
              <div>
                <a-typography-text bold class="title-div text-[16px]">{{
                  item.name
                }}</a-typography-text>
                <div class="text-[#8A919F] text-[12px]"
                  >{{ item.user_name }} · {{ item.article_num }}评论 ·
                  {{ item.subscribe_num }}订阅数</div
                >
              </div>
              <a-image class="rounded-[5px]" width="72" height="72" :src="item.cover" />
            </a-space>
          </a>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>
